<template>
	<view>
		<view class="wrap">
			<view class="bg-con" v-if="data">
				<view class="top-title u-flex">
					<view class="tips-logo u-flex">
						<text class="iconfont icon-zhifubao1"></text>
						<text>支付宝支付</text>
					</view>
				</view>
				<view class="price">
					付款金额 ￥<text>{{(Number(data.house_deposit)).toFixed(2)}}</text>
				</view>
				<view class="qr-code">
					<text class="iconfont icon-qian"></text>
					<image :src="imgUrl(data.payType.image)" @click="lookqr"></image>
					<view class="text">请扫码二维码付款，付款后上传付款凭证</view>
				</view>
			</view>
			
			<view class="pay-btn">
				<u-button type="primary" @click="show = true" shape="circle">我已支付</u-button>
			</view>
			
			<view class="tips-text">*支付宝支付需要后台审核，付款时间以后台确认收款为准。</view>
		</view>
		
		<u-modal v-model="show" show-cancel-button confirm-text="我已付款" confirm-color="#ff3737" @confirm="pay()" title="请上传付款凭证">
			<view class="upload u-flex">
				<u-upload @on-list-change="changeed" :action="action" name="file" :header="{token:token}" max-count="1"></u-upload>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				data:'',
				action:'',
				pay_image:''
			}
		},
		methods: {
			pay(){
				if(!this.pay_image.length){this.$u.toast('请上传付款凭证');return}
				
				this.$u.post('/api/user/payDeposit',{
					build_type:this.data.type,//类型 新房二手房...
					house_id:this.data.id,
					status:this.data.types === '1' ? 1 : 2, //1意向金，2定金
					admin_housekeeper_id:this.data.ids,//管家
					price:this.data.house_deposit,
					pay_method:this.data.payType.id,//支付方式id
					pay_image:this.pay_image.toString()
				}).then(res=>{
					this.jump('/pages/house/pay/pay-success',!0)
				})
			},
			changeed(lists,name){
				if(lists.every(item=>item.response)){
					this.pay_image = lists.map(i=>i.response.data.fullurl)
				}
			},
			lookqr(){
				let url = this.imgUrl(this.data.payType.image)
				uni.previewImage({
					urls:[url]
				})
			}
		},
		onLoad({data}) {
			this.action = this.$u.api.uploadUrl()
			this.data = JSON.parse(decodeURIComponent(data))
		}
	}
</script>

<style lang="scss">
	.wrap{padding: 30rpx;
		.bg-con{background-color: #ff3737;}
	}
	.top-title{
		height: 144rpx;position: relative;border-bottom: 2rpx dashed #fff;justify-content: center;
		.tips-logo{
			color: #fff;
			.iconfont{color: #fff;font-size: 50rpx;margin-right: 20rpx;}
		}
		&::before,&::after{content: '';display: block;border-radius: 50%;width: 30rpx;height: 30rpx;background-color: #fff;position: absolute;bottom: -15rpx;left: -15rpx;}
		&::after{left: auto;right: -15rpx;}
	}
	.price{padding: 40rpx;text-align: center;color: #fff;font-size: 34rpx;position: relative;border-bottom: 2rpx dashed #fff;
		text{font-weight: 40rpx;font-weight: bold;border-bottom: 1rpx solid #fff;font-size: 40rpx;}
		&::before,&::after{content: '';display: block;border-radius: 50%;width: 30rpx;height: 30rpx;background-color: #fff;position: absolute;bottom: -15rpx;left: -15rpx;}
		&::after{left: auto;right: -15rpx;}
	}
	.qr-code{padding-top: 60rpx;text-align: center;position: relative;
		image{width: 200rpx;height: 200rpx;}
		.text{color: #fff;padding: 40rpx 0;position: relative;z-index: 1;}
		.icon-qian{position: absolute;color: #ff5555;font-size: 200rpx;right: 0;bottom: 0;}
	}
	
	.pay-btn{padding-top: 40rpx;}
	.upload{justify-content: center;padding: 20rpx 0;}
	.tips-text{color: #666;font-size: 26rpx;padding-top: 30rpx;text-align: justify;}
</style>
